<script setup lang="ts">
import { operatorList } from '@/components/common/common'

const props = withDefaults(
  defineProps<{
    modelValue: any
    placeholder: string
    codes: any
    operator?: Array<string>
  }>(),
  {}
)
</script>

<template>
  <div style="display: flex">
    <el-select
      class="s1"
      default-first-option
      v-model="props.modelValue!.operator"
      :disabled="operator === undefined || operator.length <= 1"
      placeholder="Select"
      style="width: 105px"
    >
      <template v-if="operator === undefined || operator.length === 0">
        <el-option label="等于" value="EQ" />
      </template>
      <template v-else>
        <template v-for="it in operatorList" :key="it.value">
          <el-option
            :disabled="operator?.length <= 1"
            v-if="operator?.find((op) => op == it.value) !== undefined"
            :label="it.label"
            :value="it.value"
          />
        </template>
      </template>
    </el-select>
    <el-select
      class="s2"
      clearable
      :multiple="props.modelValue!.operator === 'IN'"
      style="width: 168px"
      :placeholder="props.placeholder"
      v-model="props.modelValue!.value"
    >
      <el-option v-for="op in props.codes" :key="op.itemId" :label="op.itemName" :value="op.itemId" />
    </el-select>
  </div>
</template>

<style scoped>

:deep(.s1 .el-select__wrapper) {
  background-color: var(--el-fill-color-light);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow:
    1px 0 0 0 var(--el-border-color) inset,
    0 1px 0 0 var(--el-border-color) inset,
    0 -1px 0 0 var(--el-border-color) inset;
}

:deep(.s2 .el-select__wrapper) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

</style>
